<template>
  <div :class="showMobilePage?'mobile-help-detail':''" class="help-center">
    <HelpTop @getKeyWord="getKeyWord"/>
    <div class="help-right">
      <HelpSidebar :model-name="modelName" :style="showMobilePage?'':'margin-bottom: 68px;'" is-in-detail @getName="getName"/>
      <infoData ref="infoData" :id="id" :model-name="modelName" @toBack="toBack"/>
    </div>
  </div>
</template>
<script>
import HelpSidebar from '@/components/helpCenter/helpSidebar';
import HelpTop from '../model/top';
import infoData from './model/info';
import { mapState } from 'vuex';

export default {
  components: { HelpTop, HelpSidebar, infoData },
  data() {
    return {
      modelName: '',
      title: '新手必读',
      id: null,
      screenHeight: null,
      sidebarHeight: null
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  mounted() {
    this.$nextTick(() => {
      this.screenHeight = window.innerHeight - 60;
    });
  },
  created() {
    this.id = Number(this.$route.params.id) || null;
    this.modelName = this.$route.query.model;
  },
  methods: {
    getName(name) {
      this.modelName = name;
      this.$router.push({
        name: 'help',
        query: { model: this.modelName }
      });
    },
    getKeyWord(word) {
      // 快速跳转到列表搜索
      this.$router.push({
        name: 'help',
        query: {
          keyWord: word,
          model: this.modelName,
          isSearch: true // 从搜索进行跳转进入则不走列表页面create中调用接口的逻辑
        }
      });
    },
    toBack() {
      this.$router.push({
        name: 'help',
        query: {
          model: this.modelName
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.help-center {
  margin-top: 56px;
  .help-right {
    display: flex;
  }
}
.mobile-help-detail {
  margin-top: 0;
  padding: 12px 12px 0;
  background-color: #fff;
  .help-right {
    display: block;
  }
}
</style>
